<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="com.cetc39.util.DateJsonValueProcessor"%>
<%@ page import="net.sf.json.JsonConfig"%>
<%@ page import="net.sf.json.JSONObject"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>39 | 一级计划检查</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords"
	content="Modern Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript">
	
	 addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } 

</script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel='stylesheet' type='text/css' />
<!-- Custom CSS -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
<!-- Graph CSS -->
<link href="css/lines.css" rel='stylesheet' type='text/css' />
<link href="css/font-awesome.css" rel="stylesheet">
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- Nav CSS -->
<link href="css/custom.css" rel="stylesheet">
<!-- Metis Menu Plugin JavaScript -->
<script src="js/metisMenu.min.js"></script>
<script src="js/custom.js"></script>
<!-- Graph JavaScript -->
<script src="js/d3.v3.js"></script>
<script src="js/rickshaw.js"></script>
<style type="text/css">
		
	.detail_test ul {list-style: none; margin-left: 0%}
	.detail_test li {float: left; margin-right: 9%}
	
	details summary::-webkit-details-marker { display:none; }
	
</style>
<script type="text/javascript">
	function fun(id) {
		var openUrl = "nodeDetail?id=" + id;
		var iWidth = 800; //弹出窗口的宽度;
		var iHeight = 690; //弹出窗口的高度;
		var iTop = (window.screen.availHeight - 30 - iHeight) / 2; //获得窗口的垂直位置;
		var iLeft = (window.screen.availWidth - 10 - iWidth) / 2; //获得窗口的水平位置;
		window.open(openUrl, "", "height=" + iHeight + ", width=" + iWidth
				+ ", top=" + iTop + ", left=" + iLeft + ", resizable=yes, scrollbars=1, location=no");
	}

/*
	function getNodeDetail() {
		var openUrl = "node_null02.html";//弹出窗口的url
		var iWidth = 800; //弹出窗口的宽度;
		var iHeight = 690; //弹出窗口的高度;
		var iTop = (window.screen.availHeight - 30 - iHeight) / 2; //获得窗口的垂直位置;
		var iLeft = (window.screen.availWidth - 10 - iWidth) / 2; //获得窗口的水平位置;
		window.open(openUrl, "", "height=" + iHeight + ", width=" + iWidth
				+ ", top=" + iTop + ", left=" + iLeft + ", resizable=yes, scrollbars=1, location=no");
	}
*/

	function getText() {
		var id = document.all['plan'].value;
		if (id == "null") {
			return;
		}
		var xhr = getXhr();
		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4 && xhr.status == 200) {
				var txt = xhr.responseText;
				var firstplanStr = txt.split("|")[0];
				var firstplan = JSON.parse(firstplanStr);
				var codeTh = document.getElementById("codeTh");
				var code = document.getElementById("code");
				codeTh.innerHTML = "编号";
				if (firstplan.plan_version != null) {
					code.innerHTML = firstplan.plan_version;
				}
				var projectTh = document.getElementById("projectTh");
				var project = document.getElementById("project");
				projectTh.innerHTML = "一级计划所属项目";
				if (firstplan.project.project_name != null) {
					project.innerHTML = firstplan.project.project_name;
				}

				var versionTh = document.getElementById("versionTh");
				var version = document.getElementById("version");
				versionTh.innerHTML = "版本";
				if (firstplan.plan_version != null) {
					version.innerHTML = firstplan.plan_version;
				}

				var setstartTh = document.getElementById("setstartTh");
				var setstart = document.getElementById("setstart");
				setstartTh.innerHTML = "开始创建时间";
				if (firstplan.plan_setstart != null) {
					setstart.innerHTML = firstplan.plan_setstart;
				}

				var setfinishTh = document.getElementById("setfinishTh");
				var setfinish = document.getElementById("setfinish");
				setfinishTh.innerHTML = "创建完成时间";
				if (firstplan.plan_setfinish != null) {
					setfinish.innerHTML = firstplan.plan_setfinish;
				}

				var lasteditTh = document.getElementById("lasteditTh");
				var lastedit = document.getElementById("lastedit");
				lasteditTh.innerHTML = "最后修订时间";
				if (firstplan.plan_lastedit != null) {
					lastedit.innerHTML = firstplan.plan_lastedit;
				}

				var issueTh = document.getElementById("issueTH");
				var issue = document.getElementById("issue");
				issueTh.innerHTML = "发布时间";
				if (firstplan.plan_issue != null) {
					issue.innerHTML = firstplan.plan_issue;
				}

				/*
					一下为节点的显示
				 */
				 
				var nodeStr = txt.split("|")[1];
				var node = JSON.parse(nodeStr);
				var len = node.length;
				
				var detail_div = document.getElementById("detail_div");	
				detail_div.innerHTML = "";
				
				var ulTitle = document.createElement("ul");
				var li_0 = document.createElement("li");
				li_0.innerHTML = "节点状态";
				var li_1 = document.createElement("li");
				li_1.innerHTML = "节点编号";
				var li_2 = document.createElement("li");
				li_2.innerHTML = "节点描述";
				var li_3 = document.createElement("li");
				li_3.innerHTML = "节点开始时间";
				var li_4 = document.createElement("li");
				li_4.innerHTML = "节点结束时间";
				var li_5 = document.createElement("li");
				li_5.innerHTML = "节点版本";
				var li_6 = document.createElement("li");
				li_6.innerHTML = "操作";
				ulTitle.appendChild(li_0);
				ulTitle.appendChild(li_1);
				ulTitle.appendChild(li_2);
				ulTitle.appendChild(li_3);
				ulTitle.appendChild(li_4);
				ulTitle.appendChild(li_5);
				ulTitle.appendChild(li_6);
				detail_div.appendChild(ulTitle);
				
				for(var i = 0; i < len; i++) {
					//每次循环生成一个节点并创建details
					var nodeDetails = document.createElement("details");
					//创建展开式菜单的summary并设置内容
					var summary = document.createElement("summary");
					var ul = document.createElement("ul");
					ul.className = "node_list"
					ul.classes = "myul";
					var status_li = document.createElement("li");
					if(node[i].status == 0) {
						status_li.innerHTML = "未完成";
					} else {
						status_li.innerHTML = "已完成";
					}
					var id_li = document.createElement("li");
					id_li.innerHTML = node[i].node_id;
					var desc_li = document.createElement("li");
					desc_li.innerHTML = node[i].node_describe;
					var start_li = document.createElement("li");
					start_li.innerHTML = node[i].node_starttime;
					var end_li = document.createElement("li");
					end_li.innerHTML = node[i].endtime;
					var version_li = document.createElement("li");
					version_li.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;V" + node[i].node_version;
					var operating = document.createElement("li");
					var hidden_li = document.createElement("li");
					var hidden = document.createElement("input");
					hidden.id = "nodeId" + i;
					hidden.type = "hidden";
					hidden.value = node[i].id;
					hidden_li.appendChild(hidden);
					var detail = document.createElement("button");
					detail.innerHTML = "查看详情";
					detail.onclick = function(){
						openUrl = "nodeDetail?opcode=getNode&id=" + this.parentNode.parentNode.childNodes[0].childNodes[0].value;
						var iWidth = 800; //弹出窗口的宽度;
						var iHeight = 690; //弹出窗口的高度;
						var iTop = (window.screen.availHeight - 30 - iHeight) / 2; //获得窗口的垂直位置;
						var iLeft = (window.screen.availWidth - 10 - iWidth) / 2; //获得窗口的水平位置;
						window.open(openUrl, "", "height=" + iHeight + ", width=" + iWidth
								+ ", top=" + iTop + ", left=" + iLeft + ", resizable=yes, scrollbars=1, location=no");
					};
					operating.appendChild(detail);
					var status = document.createElement("button");
					status.innerHTML = "完成确认";
					operating.appendChild(status);
					ul.appendChild(hidden_li);
					ul.appendChild(status_li);
					ul.appendChild(id_li);
					ul.appendChild(desc_li);
					ul.appendChild(start_li);
					ul.appendChild(end_li);
					ul.appendChild(version_li);
					ul.appendChild(operating);
					summary.appendChild(ul);
					nodeDetails.appendChild(summary);
					detail_div.appendChild(nodeDetails);
				}
			}
		};
		xhr.open("get", encodeURI("findPlanByIdJSON?id=" + id), true);
		xhr.send(null);
	};
	function getXhr() {
		var xhr = null;
		if (window.XMLHttpRequest) {
			xhr = new XMLHttpRequest();
		} else {
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
		return xhr;
	};
</script>
</head>
<body>
	<div id="wrapper">
		<!-- Navigation -->
		<!-- left.jsp -->
		<jsp:include page="left.jsp"></jsp:include>
		<div id="page-wrapper">
			<div class="xs">
				<div class="well1 white">
					<h1 align="center">一级计划列表</h1>
					选择计划： <select name="plan" onchange="getText()">
						<option value="null">您要查看哪一个项目的一级计划？</option>
						<c:forEach items="${planList }" var="plan">
							<option value="${plan.id }">${plan.project.project_name
								}</option>
						</c:forEach>
					</select>
				</div>
				<h3 align="center">计划信息</h3>
				<div id="firstplan">
					<table class="table">
						<tr>
							<th><span id="codeTh"></span>
							</th>
							<td><span id="code"></span>
							</td>
							<th><span id="projectTh"></span>
							</th>
							<td><span id="project"></span>
							</td>
							<th><span id="versionTh"></span>
							</th>
							<td><span id="version"></span>
							</td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<th><span id="setstartTh"></span>
							</th>
							<td><span id="setstart"></span>
							</td>
							<th><span id="setfinishTh"></span>
							</th>
							<td><span id="setfinish"></span>
							</td>
							<th><span id="lasteditTh"></span>
							</th>
							<td><span id="lastedit"></span>
							</td>
							<th><span id="issueTH"></span>
							</th>
							<td><span id="issue"></span>
							</td>
						</tr>
					</table>
				</div>
				<br>
				<h3 align="center">节点信息</h3><br>
				<!-- <div id="nodes">
					<table class="table" id="nodeTable">
						<tr>
							<th>节点编号</th>
							<th>节点信息描述</th>
							<th>节点开始时间</th>
							<th>节点结束时间</th>
						</tr>
					</table>
				</div> -->
				<div id="detail_div" class="detail_test" align="center">
				<br>
				</div>
			</div>

			
		</div>
			<!-- copyright -->
			<div id="footer">
				<jsp:include page="copyright.jsp"></jsp:include>
			</div>
	</div>
	<!-- /#page-wrapper -->
	<!-- /#wrapper -->
	<!-- Bootstrap Core JavaScript -->
	<script src="js/bootstrap.min.js"></script>
</body>
</html>
